<template>
    <div class="container">
        <div style="width:100%;height:100%; z-index: 99999999" id="professionalChart"></div>
        <div class="flex float" style="flex-direction: column;justify-content: space-between">
            <div style="flex:1" class="flex item">
                <img src="../assets/icon-company.png">
                <div style="padding-left:4px">
                    <div class="label" style="display: flex;">{{jobName}}紧缺数
                    <div class="value">{{jobNeedCount}}<span class="unit">人</span></div></div>
                </div>
            </div>
            <div style="flex:1" class="flex item">
                <img src="../assets/icon_pie.svg">
                <div style="padding-left:4px">
                    <div class="label" style="display: flex">{{jobName}}人才供需倍率
                    <div class="value">{{ratio}}</div></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: {
        data: Object
    },
    data() {
        return {
            myChart: null,
            jobNeedCount: 0,
            ratio: 0,
            jobName: ''
        }
    },
    watch: {
        data: {
            handler(oldV, newV) {
                setTimeout(() => {
                    this.showChart()
                    this.showInfo()
                }, 200);
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        showInfo(){
          this.jobNeedCount = this.data.jobNeedCount
          this.ratio = this.data.ratio
        },
        showChart() {
            // console.log(this.data)
            if (!this.myChart) {
                this.myChart = echarts.init(document.getElementById('professionalChart'));
            } else {
                // this.myChart.clear();
            }
            let angle = 45;
            let array = this.data.list;
            let option = {
                color: ['#0884FF', '#65D2FF','#30D158', '#FFD60A', '#FFA00A', '#FF453A', '#BF5AF2'],
                legend: {
                    data: array,
                   // orient: 'vertical',
                    itemWidth: 8,
                    itemHeight: 8,
                    itemGap:20,
                    top: '33%',
                    left: '47%',
                    textStyle: {
                        color: '#FFF',
                        fontSize: 16
                    }
                },
                title: {
                    //text: `{label|总岗位数}\n{value|${this.data.jobCount}}\n{unit|个}`,
                    text: `{label|岗位种类}\n{value|${this.data.lackCount}}\n{unit|种}`,
                    top: '28%',
                    left: '18%',
                    textStyle: {
                        rich: {
                            label: {
                                color: '#FFF',
                                fontSize: 16,
                                align: 'center'
                            },
                            value: {
                                color: '#FFF',
                                fontSize: 20,
                                fontWeight: 500,
                                padding: [4, 0, 4, 0],
                                align: 'center'
                            },
                            unit: {
                                color: 'rgba(255,255,255,0.72)',
                                fontSize: 16,
                                align: 'center'
                            }
                        }
                    }
                },
                series:[{
                    type: 'pie',
                    radius: ['53%', '68%'],
                    center:['25%','43%'],
                    data: array,
                    label: {show: false},
                    emphasis:{
                        show:true
                    },
                  // left: '-50%',
                  //   top: '-15%',
                    z: 999
                },{
                    name: "",
                    type: 'custom',
                    coordinateSystem: "none",
                    renderItem: function(params, api) {
                        return {
                            type: 'arc',
                            shape: {
                                cx: api.getWidth() / 4,
                                cy: api.getHeight()  / 2 - api.getHeight()  / 14 ,
                                r: Math.min(api.getWidth(), api.getHeight()) / 4,
                                startAngle: (0+-angle) * Math.PI / 180,
                                endAngle: (360+-angle) * Math.PI / 180
                            },
                            style: {
                                stroke:{
                                    type: 'linear',
                                    x: 1,
                                    y: 0,
                                    x2: 0,
                                    y2: 0.5,
                                    colorStops: [{
                                        offset: 1, color: '#47F6FE'
                                    },{
                                        offset: 0.2, color: 'rgba(71,139,255,0.2)'
                                    },{
                                        offset: 0, color: 'rgba(71,139,255,0)'
                                    }]
                                },
                                fill: "transparent",
                                lineWidth: 3
                            },
                            silent: true
                        };
                    },
                    data: [0],
         },{
            type: 'gauge',
            startAngle: 0,
            endAngle: 360,
            center: ['25%', '42.5%'],
            radius: '100%',
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {
                splitNumber: 10,
                lineStyle: {
                    color:'rgba(187,237,255,0.72)'
                }
            },
        }]
            }
            this.myChart.setOption(option);
            this.myChart.off();
            this.myChart.on("click", params=> {
              console.log('饼图点击',params)
              this.jobName = params.data.name
              this.jobNeedCount= params.data.value
              this.ratio= params.data.ratio
            })

        }
    },
  mounted() {
    this.showInfo()
  }
}
</script>
<style lang="less" scoped>
.container {
    height: 252px;
    width: 100%;
    position: relative;
}
.flex {
    display: flex;
    flex-wrap: nowrap;
}
img {
    width: 24px;
    height: 24px;
}
.item {
    padding-top: 8px;
    text-align: left;
    position: relative;
}
.label {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    font-weight: 400;
}
.value {
    font-family: DINPro-Medium;
    font-size: 16px;
    color: #FFF;
    letter-spacing: 0.96px;
    padding: 0 3px;
    font-weight: 500;
}
.unit {
    opacity: 0.72;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    font-weight: 400;
}
.float {
    position: absolute;
    top: 0;
    left: calc(47%);
    width: 50%;
}
</style>
